<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="head :: commonHead('编剧/导演详情')">

</head>

<body>

<div th:replace="head :: header"></div>

<!-- 主体内容 -->
<div id="app" class="screenwriter_container">
    <div class="screenwriter_top">
        <div class="left">
            <img :src="user.portrait|UploadFile">
        </div>
        <div class="right">
            <div class="right_title">
                <h2>{{user.type|Dict(dictionaries)}}：{{user.nickname}}</h2>
                <div class="right_icon">
<!--                    <dl>-->
<!--                        <dt class="operations-collect" :data-collect-id="user.id" data-collect-type="1"-->
<!--                            data-collect-operation="2">-->
<!--                            <i :class="user.id|Active(userCollects, 1, 2) ? 'iconfont icon-zanxinxingguanzhu icon-active' : 'iconfont icon-zanxinxingguanzhu'"></i>-->
<!--                        </dt>-->
<!--                        <dd>{{user.collectCount|NumberFormat}}</dd>-->
<!--                    </dl>-->
<!--                    <dl>-->
<!--                        <dt class="operations-collect" :data-collect-id="user.id" data-collect-type="1"-->
<!--                            data-collect-operation="1">-->
<!--                            <i :class="user.id|Active(userCollects, 1, 1) ? 'iconfont icon-dianzan icon-active' : 'iconfont icon-dianzan'"></i>-->
<!--                        </dt>-->
<!--                        <dd>{{user.likeCount|NumberFormat}}</dd>-->
<!--                    </dl>-->
                </div>
            </div>
            <div class="right_text">
                <ul>
                    <li>毕业院校：{{user.graduateInstitution}}</li>
                    <li>主要成就：{{user.mainAchievements}}</li>
                    <li>一句话：{{user.personalizedSignature}}</li>
                    <li>背景：{{user.background}}</li>
                </ul>
            </div>

        </div>
    </div>


    <div class="love_container">
<!--        <div class="love_container_title clearfix">-->
<!--            <div class="love_container_title_l">-->
<!--                <em></em>-->
<!--                <h3>作品墙</h3>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="love_container_list">-->
<!--            <ul class="clearfix">-->
<!--                <li v-for="(item, index) in videos" :key=item.id>-->
<!--                    <div class="top">-->
<!--                        <img :src="item.spriteUrl2|UploadFile" class="fengmian" @click="play(index)"/>-->
<!--                    </div>-->
<!--                    <div class="center">-->
<!--                        <h4>作品名称：{{item.name}}</h4>-->
<!--                        <p>简介：{{item.title}}</p>-->
<!--                    </div>-->
<!--                    <div class="bottom clearfix">-->
<!--                        <div class="left">-->
<!--                            <a :href="'/order/ready/1?sameStyleId=' + item.id" target="_blank">订购同款</a>-->
<!--                        </div>-->
<!--                        <div class="right">-->
<!--                            <dl class="video">-->
<!--                                <dt><i class="iconfont icon-shipin"></i></dt>-->
<!--                                <dd>{{item.count|NumberFormat}}</dd>-->
<!--                            </dl>-->
<!--                            <dl class="icon">-->
<!--                                <dt class="operations-collect" :data-collect-id="item.id" data-collect-type="2"-->
<!--                                    data-collect-operation="2">-->
<!--                                    <i :class="item.id|Active(productionCollects, 2, 2) ? 'iconfont icon-zanxinxingguanzhu icon-active' : 'iconfont icon-zanxinxingguanzhu'"></i>-->
<!--                                </dt>-->
<!--                                <dd :class="item.id|Active(productionCollects, 2, 2) ? 'icon-active' : ''">-->
<!--                                    {{item.collectCount|NumberFormat}}-->
<!--                                </dd>-->
<!--                            </dl>-->
<!--                            <dl class="icon">-->
<!--                                <dt class="operations-collect" :data-collect-id="item.id" data-collect-type="2"-->
<!--                                    data-collect-operation="1">-->
<!--                                    <i :class="item.id|Active(productionCollects, 2, 1) ? 'iconfont icon-dianzan icon-active' : 'iconfont icon-dianzan'"></i>-->
<!--                                </dt>-->
<!--                                <dd :class="item.id|Active(productionCollects, 2, 1) ? 'icon-active' : ''">-->
<!--                                    {{item.likeCount|NumberFormat}}-->
<!--                                </dd>-->
<!--                            </dl>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </li>-->
<!--            </ul>-->
<!--        </div>-->
<!--    </div>-->


    <div class="more_btn_wrap" v-show="videos != null && videos.length > 4">
        <a href="javascript:void(0)">查看全部 <em>》</em></a>
    </div>


    <div class="works_con" style="background: #fff;">
        <div class="comment_box" style="border-top:0;">
            <div class="works_title">
                <div class="works_title_l">
                    <em></em>
                    <h3>评论（{{evaluates.evaluateTotal}}条）</h3>
                </div>
            </div>

            <div class="comment_con clearfix" v-for="(item, index) in evaluates.data">
                <div class="comment_con_top">
                    <div class="portrait" style="margin-right: 14px;">
                        <img v-if="item.anonymous != 1 && item.evaluateUser.portrait != null && item.evaluateUser.portrait != '' && item.evaluateUser.portrait != undefined" :src="uploadServer + item.evaluateUser.portrait">
                        <img v-if="item.evaluateUser.portrait == null || item.evaluateUser.portrait == '' || item.evaluateUser.portrait == undefined || item.anonymous == 1"
                             th:src="${#request.getAttribute('ctx') + '/static/front/img/user.png'}">
                    </div>
                    <div class="nickname" style="margin-right: 80px;">
                        <p>{{item.anonymous == 1 ? '匿名用户' : item.evaluateUser.nickname}}</p>
                    </div>
                    <div class="star">
                        <i v-for="temp in item.score" class="iconfont icon-iconfontxingxing on"></i>
                        <i v-for="temp in (5 - item.score)" class="iconfont icon-star"></i>
                        <span style="margin-left: 10px;">{{item.score}}.0</span>
                    </div>
                    <div class="time">
                        {{item.createDate | dateFormat('yyyy-MM-dd hh:mm')}}
                    </div>
                </div>
                <div class="comment_con_middle">
                    <div class="label">
                        <ul class="clearfix" v-if="item.tag != null">
                            <li v-for="temp in item.tag.split(',')" v-if="temp != null && temp != ''">
                                {{item|Dict(evaluateDictionaries)}}
                            </li>
                        </ul>
                    </div>
                    <p>评价：{{item.comment}}</p>
                </div>
                <div class="comment_con_bottom" v-if="item.reply != null && item.reply != ''">
                    <em></em>
                    <p>管理员回复：{{item.reply}}</p>
                </div>
            </div>
        </div>

    </div>

    <!-- 底部分页 -->
    <div style="display: flex;justify-content: center;">
        <el-pagination
                @size-change="commentHandleSizeChange"
                @current-change="commentHandleCurrentChange"
                :current-page.sync="evaluates.evaluateCurrentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="evaluates.evaluatePageSize"
                layout="prev, pager, next"
                :total="evaluates.evaluateTotal"
                v-show="evaluates.data != null && evaluates.data.length > 0">
        </el-pagination>
        <div v-show="evaluates.data == null || evaluates.data.length == 0">
            暂时没有评论!
        </div>
    </div>

</div>

<!-- 底部版权信息 -->
<div th:replace="foot :: body"></div>

</body>

<!-- tencent cloud production -->
<link href="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet">
<script src="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.js"></script>

<script th:src="${#request.getAttribute('ctx') + '/static/front/js/home.js'}" type="text/javascript"
        charset="utf-8"></script>

<script th:inline="javascript">

    var player;
    var currentUrl;

    new Vue({
        el: '#app',
        data: {
            user: [[${user}]],
            videos: [[${videos}]],
            dictionaries: [[${dictionaries}]],

            userCollects: [[${userCollects}]],
            productionCollects: [[${productionCollects}]],

            evaluates: {
                evaluateCurrentPage: [[${evaluatesPage.pageNum}]],
                evaluatePageSize: [[${evaluatesPage.pageSize}]],
                evaluateTotal: [[${evaluatesPage.total}]],
                data: [[${evaluatesPage.list}]],

                evaluateDictionaries: [[${evaluateDictionaries}]]
            }
        },
        methods: {
            loadComment: function () {
                var _self = this;
                $.ajax({
                    type: 'get',
                    url: [[${ctx}]] + '/comment/api/list?pageNum=' + _self.currentPage + "&pageSize=" + _self.pageSize,
                    data: {
                        target: _self.user.id
                    },
                    dataType: 'json',
                    success: function (result) {
                        if (result.status = Messages.HTTP_STATUS.SUCCESS) {
                            if (result.data.evaluates.list.length > 0) {
                                _self.evaluates.data = result.data.evaluates.list;
                                _self.evaluates.evaluateCurrentPage = result.data.evaluates.pageNum;
                                _self.evaluates.evaluateTotal = result.data.evaluates.total;
                            }
                        }
                    },
                    error: function (e) {
                        ELEMENT.Message.error(Messages.ERROR);
                    }
                })
            },

            commentHandleSizeChange(val) {
                this.pageSize = val;
                this.loadComment();
            },

            commentHandleCurrentChange(val) {
                this.currentPage = val;
                this.loadComment();
            },

            /**
             * 点击播放
             * @param index
             */
            play: function (index) {
                $('#video').show();

                var _self = this;
                var video = _self.videos[index];

                if (!!currentUrl) {
                    currentUrl = video.url;
                    player.loadVideoByID({
                        fileID: video.url,
                        appID: video.appId,
                        t: video.t,
                        sign: video.sign,
                    })
                } else {
                    currentUrl = video.url;
                    // if content already load, execute play, else load.
                    if (!player) {
                        _self.title = video.name;
                        _self.$nextTick(function () {
                            var $videoBox = $('#player');
                            player = player || TCPlayer('player', {
                                fileID: video.url,
                                appID: video.appId,
                                width: $videoBox.width(),
                                height: $videoBox.height(),
                                definition: 30,
                                t: video.t,
                                sign: video.sign,
                                options: {
                                    playbackRates: {}
                                },
                                plugins: {
                                    ContinuePlay: { // 开启续播功能
                                        // auto: true, //[可选] 是否在视频播放后自动续播
                                        // text:'上次播放至 ', //[可选] 提示文案
                                        // btnText: '恢复播放' //[可选] 按钮文案
                                    }
                                }
                            });
                        })
                    }
                }
            },
        }
    })
</script>

</html>
